<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		* {
		  margin: 0;
		  padding: 0;
		  list-style: none;
		  -webkit-user-select: none;
		  -moz-user-select: none;
		  -ms-user-select: none;
		  user-select: none; }

		.menu {
		  display: inline-block;
		  width: 500px;
		  border-radius: 8px;
		  padding: 20px;
		  box-shadow: 5px 5px 10px #888;
		  margin: 20px;
		  cursor: default; }
		  .menu h1 {
			margin-bottom: 10px;
			display: inline-block;
			margin-right: 20px; }
			.menu h1.active {
			  color: red; }
		  .menu ul {
			position: relative; }
		  .menu ul > li {
			height: 35px;
			line-height: 35px;
			cursor: grab; }
			.menu ul > li input {
			  display: none; }
			.menu ul > li button {
			  float: right; }
			.menu ul > li:hover {
			  background: #f2f2f2; }
		</style>
	</head>
	<body>
		<div class="menu">
            <div class="menu1">
				<!-- <h1>大菜</h1>
				<h1>中菜</h1>
				<h1>小菜</h1> -->
            </div>

            <div class="menu2">
                <div class="m2_t">
                    <input type="text" placeholder="菜名" /> 
                    <input type="number" placeholder="价格" />
                    <button class="add">添加</button>
                </div> 

                <ul></ul>
            </div>

        </div>
		
		
		<script src="https://cdn.bootcss.com/jquery/2.1.0/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			/* 
				step 1: 根据menu的数据，动态生成一个二级联运菜单
				step 2: 实现动态增加、修改、删除菜单dom节点，同时保持dom结构与json保持同步
				step 3: 实现通过拖拽修改菜单结构（可使用jQuery插件），同时保持dom结构与json保持同步
				
				初始数据:
			 */
			var menu = [
				{"type_id":1,"name":"大菜","food":[
					{"food_id":1,"name":"鱼香肉丝","price":"10"},
					{"food_id":2,"name":"红烧肉","price":"11"},
					{"food_id":3,"name":"香辣粉","price":"12"}
				]},
				{"type_id":2,"name":"中菜","food":[
					{"food_id":4,"name":"小炒肉","price":"13"},
					{"food_id":5,"name":"云吞","price":"14"}
				]},
				{"type_id":3,"name":"小菜","food":[
					{"food_id":6,"name":"雪糕","price":"15"},
					{"food_id":7,"name":"黄瓜","price":"16"}
				]}      
			];
			
			//变量声明
			var menu_index;
			
			//调用
			init();
			
			//初始化
			function init(){
				menu_index = 0;
				//一级菜单模板
				var men1_html = '';
				menu.forEach((item,index)=>{
					men1_html += `<h1 class="classfy" data-type-id="1">${item.name}</h1>`;
				});
				//渲染一级菜单
				$('.menu1').html(men1_html);
				//默认选中第一个
				$('.menu1 h1').eq(0).addClass('active');
				
				//初次渲染二级菜单
				render_menu2(menu[0].food);
				$('.menu h1').on('click',function(){
					var that_index = $(this).index();
					//如同点击同一个一级菜单选项
					if(menu_index == that_index){
						return;
					}
					//渲染二级菜单
					render_menu2(menu[that_index].food);
					//下标值交替
					menu_index = that_index;
					//
					$(this).addClass('active').siblings().removeClass('active');
				});
				
				//添加功能
				$('.add').on('click',function(){
					var add_name = $('.m2_t>input').eq(0).val();
					var add_price = $('.m2_t>input').eq(1).val();
					
					if(add_name == "" || add_price == ""){
						console.log("请添加值！")
						return;
					}
					//先修改数据再去渲染, food_id没有要求
					menu[menu_index].food.push({"food_id": 5, "name" : add_name, "price" : add_price});
					render_menu2(menu[menu_index].food);
				});
				
				//删除功能
				$('.menu2').on('click','.del',function(){
					//获取删除按钮,获取data-index属性
					var button_index = $(this).attr('data-index');
					//修改json
					menu[menu_index].food.splice(button_index,1);
					//渲染
					render_menu2(menu[menu_index].food);
				});
				
				//点击span 唤出input
				$('.menu2').on('click','span',function(){
					$(this).hide().next().show();
				});
				
				//修改功能
				$('.menu2').on('click','.change',function(){
					var btn_index = $(this).attr('data-index');
					//获取input的内容
					var inp_name = $('.menu2 li').eq(btn_index).find('input.name').val();
					var inp_price = $('.menu2 li').eq(btn_index).find('input.price').val();
					if(inp_name !== ""){
						menu[menu_index].food[btn_index].name = inp_name;
					}
					
					render_menu2(menu[menu_index].food);
				});
			}
			
			//渲染二级菜单
			function render_menu2(menu_arr){
				var menu2_html = '';
				menu_arr.forEach((item,index)=>{
					menu2_html += `
					<li data-id="4">
						<span class="name">${item.name}</span>
						<input type="text" class="name" placeholder="菜名">
						<span class="price">价格：￥${item.price}</span>
						<input type="number" class="price" placeholder="价格">
						<button class="del" data-index="${index}">删除</button>
						<button class="change" data-index="${index}">修改</button>
					</li>
					`
				});
				$('.menu2 ul').html(menu2_html);
			}
		</script>
	</body>
</html>
